<template>
  <!-- 新建车辆 -->
  <div class="NewCar">
    <!-- 页面头部和查询区域 -->
    <img
      src="http://127.0.0.1:5173/5e30abc1-16f7-4eff-9c65-75a62dab0acf"
      alt=""
    />
    <div class="NewCar-tittle">
      <div class="crumbs">
        <p>
          <span>车行管理 /</span> <span>区域管理 /</span> <span> 新建车辆</span>
        </p>
        <h3>新建车辆</h3>
      </div>
    </div>
    <div class="NewCar-content">
      <div class="content-title">
        <span>基础信息</span>
      </div>
      <div class="add">
        <el-form
          require-asterisk-position="right"
          :model="addData"
          :rules="rules"
        >
          <el-form-item prop="carNum" label="车牌号码" required="true">
            <el-input clearable v-model="addData.carNum" placeholder="请输入" />
          </el-form-item>
          <el-form-item prop="carTypeId" label="车辆品牌" required="true">
            <el-select
              clearable
              v-model="addData.carTypeId"
              placeholder="请选择"
              @change="changeFn(addData.carTypeId)"
            >
              <el-option
                :label="v.carType"
                :value="v.id"
                :key="v"
                v-for="v in carType"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="model" label="车辆型号" required="true">
            <el-select clearable v-model="addData.model" placeholder="请选择">
              <el-option :label="v" :value="v" :key="v" v-for="v in model" />
            </el-select>
          </el-form-item>
          <el-form-item prop="carColor" label="车身颜色">
            <el-input
              style="margin-left: 10px"
              clearable
              v-model="addData.carColor"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item prop="regionManageId" label="选择区域" required="true">
            <el-select clearable v-model="addData.regionManageId" placeholder="请选择">
              <el-option
                :label="v.name"
                :value="v.rid"
                :key="v"
                v-for="v in areaData"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="车辆图片">
            <el-upload
              v-model:file-list="fileList"
              action="http://123.57.203.155:8077/oss/upload"
              list-type="picture-card"
              :auto-upload="true"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handle_success"
              style="margin-left: 10px"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>

            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </el-form-item>
          <el-form-item prop="userId" label="持有人" required="true" style="margin-left: 15px">
            <el-select clearable v-model="addData.userId" placeholder="请选择">
              <el-option
                :label="v.name"
                :value="v.serialNo"
                :key="v.id"
                v-for="v in username"
                
              />
            </el-select>
          </el-form-item>
          <el-form-item label="备注" style="margin-left: 30px">
            <el-input
              style="margin-left: 10px"
              :rows="4"
              type="textarea"
              clearable
              v-model="addData.remark"
              placeholder="请输入"
            />
          </el-form-item>
        </el-form>

        <div style="padding-left: 75px">
          <el-button type="primary" @click="add">提交</el-button>
          <el-button @click="back">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import http from "../../utils/http";
import { ElMessage } from "element-plus";
import router from "../../router";
import type { FormInstance, FormRules } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps, UploadUserFile } from "element-plus";

interface aaa {
  rid: Number;
  name: String;
}
interface bbb {
  id: Number;
  carType: String;
}
interface ccc {
  id: Number;
  name: String;
  serialNo: String;
}
let fileList = ref<UploadUserFile[]>([]);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  // console.log(uploadFile, uploadFiles);
  console.log('移除图片')
};

const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  console.log('预览图片');
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
//图片上传
const handle_success = (res) => {
  console.log(res);
  if (res.code == 0) {
    addData.imgsrc = res.data.url;
  }
};

//区域数据
let areaData = ref<aaa[]>([]);
//车辆品牌
let carType = ref<bbb[]>([]);
//车辆型号
const carModel = reactive([
  { carID: 1, children: ["i7", "X5", "Z4", "M3"] },
  { carID: 2, children: ["GT", "GLC", "S350", "smart"] },
  { carID: 3, children: ["Urus", "Gallardo"] },
  { carID: 4, children: ["Roma", "SF90", "LaFerrari"] },
  { carID: 5, children: ["mini"] },
]);
//不同车辆型号
let model = ref<String[]>([]);
//住户数据
let username=ref<ccc[]>([])

//新增数据
let addData = reactive({
  id: 0,
  carNum: "",
  carColor: "",
  carTypeId: "",
  model: "",
  regionManageId: "",
  imgsrc: "",
  remark: "",
  userId: "",
  communityId: 1,
});

//正则判断
const rules = reactive<FormRules>({
  userId: [
    {
      required: true,
      message: "请选择持有人",
      trigger: "blur",
    },
  ],
  carNum: [
    {
      required: true,
      message: "请输入车牌号码",
      trigger: "blur",
    },
  ],
});

//提交
let add = () => {
  console.log(addData)
  // http({
  //   url: "/car/add",
  //   method: "POST",
  //   data: addData,
  // }).then(({ data }) => {
  //   console.log(data);
  //   if (data.code == 0) {
  //     ElMessage({
  //       message: "新增成功",
  //       type: "success",
  //     });
  //     setTimeout(() => {
  //       router.push("/home/regionalManagement");
  //     }, 1500);
  //   } else {
  //     ElMessage.error("新增失败");
  //   }
  // });
};

//选择车辆品牌
let changeFn = (index) => {
  console.log(index);
  carModel.forEach((v) => {
    if (v.carID == index) {
      model.value = v.children;
    }
  });
};
let FN = () => {};

//返回
let back = () => {
  router.push("/home/carManagement");
};

onMounted(() => {
  console.log("挂载后");
  //获取区域
  http({
    url: "/regiontype/list",
  }).then(({ data }) => {
    console.log(data);
    areaData.value = data.data;
  });

  //获取车辆品牌
  http({
    url: "/cartype/list",
  }).then(({ data }) => {
    console.log(data);
    carType.value = data.data;
  });

  //获取用户
  http({
    url: "/householdManagement/list",
    params:{
      page:1,
      limit:10000
    }
  }).then(({ data }) => {
    console.log('用户',data);
    username.value = data.data.list;
  });
});
</script>

<style lang="less" scoped>
.NewCar {
  width: 70%;
  // height: 100%;
  margin: auto;
  .NewCar-tittle {
    margin-top: 20px;
    background-color: white;
    .crumbs {
      padding: 15px 20px;
      font-size: 16px;
      p {
        margin-bottom: 10px;
        span {
          color: #8d8d8d;
        }
        span:last-child {
          color: #000;
        }
      }
    }
  }
  .NewCar-content {
    padding: 15px 20px;
    margin-top: 20px;
    background-color: white;

    .content-title {
      width: 96%;
      padding-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .add {
      width: 500px;
      margin: auto;
      .el-form-item {
        margin-bottom: 30px;
        position: relative;
        .pos {
          position: absolute;
          top: 0;
          right: 50px;
        }
      }
      .el-input,
      .el-textarea,
      .el-select {
        width: 350px;
      }
    }
  }
}
</style>
